<template>
  <cml-module-item :title="titleText">
    <a-select
      size="small"
      :value="soundsType"
      :options="soundsTypeOption"
      style="width: 120px"
      @change="setSoundsType"
    >
    </a-select>
  </cml-module-item>
</template>
<script>
import { Select } from 'ant-design-vue'
import CmlModuleItem from '../cml-module-item'
import { mapState, mapMutations } from 'vuex'
import sounds from '../../../config/sound/soundsSrc'
import { soundServer, voiceFeedbackServer } from 'anov-core'

export default {
  name: 'soundsType',
  components: {
    ASelect: Select,
    CmlModuleItem
  },
  model: {},
  props: {},
  data() {
    return {
      soundsTypeOption: []
    }
  },
  watch: {
    soundsType(v) {
      voiceFeedbackServer.speak(`平台音效已切换为 ${v}`)
      app.msg({type: 'info', content: `平台音效已切换为${v}`})
    }
  },
  computed: {
    ...mapState('soundServer', ['soundsType']),
    titleText() {
      return this.$t('cmlpanel.changeSound')
    }
  },
  created() {
    for (let key in sounds) {
      this.soundsTypeOption.push({
        label: key,
        value: key
      })
    }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    setSoundsType(v) {
      soundServer.soundsType = v
    }
  }
}
</script>
<style lang="scss" scoped></style>
